<template>
  <div>
    <Modal
      v-model="isShow"
      title="课程订单详情"
      width="800"
      @on-cancel="cancel"
    >
      <Form ref="form" :model="form" :label-width="90">
        <FormItem label="课程订单：">
          <div class="expertItem">
            <img :src="form.courseCover" alt="" class="courseCover" />
            <div class="expertInfo">
              <div>{{ form.cousrName }}</div>
              <div v-if="form.sn">订单号：{{ form.sn }}</div>
              <div>{{ form.buyTime }}</div>
            </div>
          </div>
        </FormItem>
        <FormItem label="实付金额：">
          <div>
            {{ form.isCharge == "1" ? form.actualPay : "免费" }}
          </div>
        </FormItem>
        <FormItem label="价格：">
          <div>{{ form.unitPrice }}</div>
        </FormItem>
        <FormItem label="状态：">
          <div>
            <span
              class="round"
              :class="formatsearchStatus(form.payStatus)"
            ></span>
            <span>{{
              form.payStatus == "PAID"
                ? "交易完成"
                : form.payStatus == "UNPAID"
                ? "待支付"
                : form.payStatus == "CANCEL"
                ? "交易取消"
                : ""
            }}</span>
          </div>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button size="large" @click="cancel">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      form: {},
    };
  },
  methods: {
    showFn(row) {
      this.isShow = true;
      this.form = JSON.parse(JSON.stringify(row));
    },
    cancel() {
      this.isShow = false;
    },
    formatsearchStatus(payStatus) {
      let str = "";

      switch (payStatus) {
        case "PAID":
          str = "orange";
          break;
        case "CANCEL":
          str = "red";
          break;
        case "UNPAID":
          str = "greenColor";
          break;

        default:
      }
      return str;
    },
  },
};
</script>

<style lang="scss">
.expertItem {
  display: flex;
  height: calc(180 / 1920 * 100vw);
  align-items: center;
  .expertInfo {
    margin-left: calc(30 / 1920 * 100vw);
    margin-top: calc(20 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
// 状态区分颜色
.orange {
  background: #ffb445 !important;
}
.red {
  background: #fd5151 !important;
}
.gray {
  background: #ededed !important;
}
.greenColor {
  background: #66cc33 !important;
}
.round {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #fff;
  margin-right: 5px;
}

.courseCover {
  width: calc(150 / 1920 * 100vw);
  height: calc(150 / 1920 * 100vw);
}
</style>